<template id="sysMenu">
  <div>
    <!--搜索框-->
    <el-form :inline="true" :model="searchForm">
      <el-form-item>
        <el-button
          type="primary"
          @click="addHandle"
          v-if="hasAuth('sys:menu:add')"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      :max-height="tableHeight"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >    
      <el-table-column prop="title" label="标题" width="200"> </el-table-column>
      <el-table-column prop="name" label="名称" width="150"> </el-table-column>
      <el-table-column prop="perms" label="权限编码" width="150">
      </el-table-column>
      <el-table-column prop="icon" label="图标" width="150"> </el-table-column>
      <el-table-column prop="type" label="类型" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
          <el-tag v-else-if="scope.row.type === 1" size="small" type="success"
            >菜单</el-tag
          >
          <el-tag v-else-if="scope.row.type === 2" size="small" type="info"
            >按钮</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="path" label="菜单URL" width="130"> </el-table-column>
      <el-table-column prop="component" label="菜单组件"> </el-table-column>
      <el-table-column prop="orderNum" label="排序号"> </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" size="small" type="danger"
            >禁用</el-tag
          >
          <el-tag v-else-if="scope.row.status === 1" size="small" type="success"
            >正常</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="120"
        v-if="hasAuth('sys:menu:edit') || hasAuth('sys:menu:del')"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="editHandle(scope.row.id)"
            v-if="hasAuth('sys:menu:edit')"
            >编辑</el-button
          >
          <el-divider
            direction="vertical"
            v-if="hasAuth('sys:menu:edit') && hasAuth('sys:menu:del')"
          ></el-divider>
          <el-popconfirm
            title="确定要删除这条记录吗？"
            @confirm="delHandle(scope.row.id)"
            v-if="hasAuth('sys:menu:del')"
          >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="editFormTitle"
      :visible.sync="dialogFormVisible"
      width="600px"
      @closed="resetForm('editForm')"
    >
      <el-form :model="editForm" :rules="editFormRules" ref="editForm">
        <el-form-item label="上级菜单" prop="parentId" label-width="100px">
              <treeselect
                v-model="editForm.parentId"
                :options="treeSelect"
                :normalizer="normalizer"
                :show-count="true"
                placeholder="选择上级菜单"
                autocomplete="off"
              />
            </el-form-item>
        <el-form-item label="菜单名称" prop="name" label-width="100px">
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单标题" prop="title" label-width="100px">
          <el-input v-model="editForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限编码" prop="perms" label-width="100px">
          <el-input v-model="editForm.perms" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon" label-width="100px">
          <el-input v-model="editForm.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单URL" prop="path" label-width="100px">
          <el-input v-model="editForm.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单组件" prop="component" label-width="100px">
          <el-input v-model="editForm.component" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type" label-width="100px">
          <el-radio-group v-model="editForm.type">
            <el-radio :label="0">目录</el-radio>
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="status" label-width="100px">
          <el-radio-group v-model="editForm.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">正常</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序号" prop="orderNum" label-width="100px">
          <el-input-number v-model="editForm.orderNum" :min="1" label="排序号"
            >1</el-input-number
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('editForm')">取 消</el-button>
        <el-button type="primary" @click="submitEditForm('editForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template><script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "Menu",  
  components: { Treeselect },
  data() {
    return {
      searchForm: { name: "" },
      tableData: [],
      treeSelect: [],      
      tableHeight: 600,
      multipleSelection: [],
      dialogFormVisible: false,
      editForm: {},
      editFormTitle: "",
      editFormRules: {
        parentId: [
          { required: true, message: "请选择上级菜单", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        perms: [{ required: true, message: "请输入权限编码", trigger: "blur" }],
        type: [{ required: true, message: "请选择类型", trigger: "blur" }],
        orderNum: [
          { required: true, message: "请填入排序号", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "blur" }],
      },
    };
  },
  methods: {
    getMenuTree() {
      this.$axios
        .get("/menu/tree", { params: { name: this.searchForm.name } })
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
    submitEditForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .post(
              "/menu/" + (this.editForm.id ? "update" : "save"),
              this.editForm
            )
            .then((res) => {
              this.resetForm(formName);
              this.$message({
                showClose: true,
                message: res.data.message,
                type: "success",
                onClose: () => {
                  this.getMenuTree();
                },
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addHandle(){      
      this.treeSelect.push({id:0,title:"主菜单",children:[]})
      this.treeSelect[0].children = this.tableData
      this.editFormTitle = "新增菜单"
      this.dialogFormVisible = true
    },
    editHandle(id) {
      this.treeSelect.push({id:0,title:"主菜单",children:[]})
      this.treeSelect[0].children = this.tableData      
      this.editFormTitle = "编辑菜单"
      this.$axios.get("/menu/info/" + id).then((res) => {
        this.editForm = res.data.data;
        this.dialogFormVisible = true;
      });
    },
    delHandle(id) {
      this.$axios.post("/menu/delete/" + id).then((res) => {
        this.$message({
          showClose: true,
          message: res.data.message,
          type: "success",
          onClose: () => {
            this.getMenuTree();
          },
        });
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.editForm = {};
      this.treeSelect = [];
      this.dialogFormVisible = false;
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.title,
        children: node.children,
      };
    },
  },
  created() {
    this.getMenuTree();
  },
};
</script>
<style scoped>
</style>